01. 웹 성능이란 무엇인가?

📝 Contents

웹

• 오늘날 전 세계 사람들이 인터넷에 연결된 컴퓨터를 통해 수많은 정보를 공유할 수 있는 인터넷의 대표적 서비스
• 웹은 하이퍼텍스트를 바탕으로 관련 있는 문서끼리 연결한 문서의 집합체라고 정의할 수 있음
• 하이퍼텍스트는 단어의 뜻 그대로 텍스트를 뛰어넘는 다양한 콘텐트를 아우르는 형식
• 웹 서버는 TCP/IP 기술에서 고전적인 서버의 역할을 하며 문서 형식의 콘텐츠 정보를 전달함
• 클라이언트에 해당하는 브라우저는 전달받은 페이지를 연결하는 웹 페이지의 하이퍼링크를 통해 다른 페이지로 이동하거나 또는 사용자의 정보를 입력해서 보낼 수도 있음
• 웹의 대표적인 요소는 크게 3가지로 요약할 수 있음

URL (Uniform Resource Locator)

• 웹 자원이 인터넷상 어느 위치에 존재하고 있는지를 알려주는 방법
• 클라이언트와 서버가 어떤 방식으로 데이터를 주고받을지 결정하는 프로토콜,
• 해당 서비스의 이름을 대표하는 도메인 영역,
• 해당 자원이 위치하는 장소를 구조적으로 나눈 디렉터리,
• 실제 자원이 존재하는 파일 확장자를 포함하는 자원의 경로로 이루어짐

(https 프로토콜)://(cdn 서브 도메인).(webfrontend.org 톱 레벨 도메인)/(wp-content/uploads/2020/06 디렉터리)/(book2.png 최종 경로)

• 자원의 실제 경로 부분에는 일반적으로 대소 문자를 혼용하지 않음
• 파일 확장자는 존재할 수도 있고 또는 경로로만 위치를 알려줄 수도 있음

네트워크 프로토콜

• URL을 통해 알게 된 웹의 자원 위치에 접근하는 방식
• 웹에서는 대부분 HTTP를 사용하는데 HTTP는 정보를 주고받는 헤더 부분과 실제 데이터를 주고받는 페이로드(또는 바디) 부분으로 크게 나뉘어 있음
• HTTP 프로토콜은 클라이언트(브라우저)와 서버 사이에 필요한 정보는 헤더로 주고받고, HTML이나 이미지 같은 실제 데이터는 페이로드 부분에 받을 수 있도록 설계됨

HTML (HyperText Mark-up Language)

• 해당하는 콘텐츠를 사용자에게 쉽게 나타내기 위한 것
• 다양한 웹상의 콘텐츠를 브라우저를 통해 나타낼 수 있는 태그라는 명령어로 웹의 목적에 맞는 여러 기능을 수행함
• 웹 페이지에 실제로 나타낼 데이터를 정의하고 페이지 문서의 구조를 표현하는 역할도 함
• 구조적이고 동적인 문서를 웹에서 나타낼 수 있도록 함
• 멀티미디어를 포함할 수 있음
• 사용자와 웹 서버 사이 대화형 양식을 만들 수도 있음
• 웹 페이지 콘텐츠 안 홑화살괄호(<>)에 둘러쌓인 태그로 이루어진 언어로, 태그를 사용하여 문서의 내용과 구조를 나타내는 언어인 마크업 언어의 일종임
• HTML로 작성된 웹 페이지는 HTTP 기반 네트워크를 통해 웹 서버에서 웹 브라우저로 전달되고, 웹 브라우저는 HTML을 해석하여 웹 페이지 화면을 만들어 사용자에게 제공
• 웹 페이지는 HTML 외에도 클라이언트에서 로직을 실행할 수 있는 자바스크립트, 웹 페이지의 레이아웃과 세부 형태를 정의하는 CSS 등을 같이 사용할 수 있음

• 웹 서버와 브라우저는 정해진 HTTP 프로토콜대로 작동하도록 설계되었으며,
• HTML을 이해하고 그에 맞게 콘텐츠를 나타낼 수 있도록 개발됨

웹 성능이 중요한 이유

• 웹 성능이라는 용어는 웹 사이트의 기능이나 내용을 의미하는 것이 아니라, 콘텐츠가 신속하게 전달되어 사용자가 원하는 서비스를 빠르게 전달 받을 수 있도록 하는 시스템들의 성능을 의미, 즉 웹 로딩 시간을 말함
• 웹 로딩 속도가 느리면 서비스 사용자의 이탈률이 높아진다는 조사 결과가 있음
• 구글의 조사 자료에 따르면 페이지가 3초 안에 로딩되지 않으면 53%의 사용자가 떠나고 로딩 시간이 길어질수록 사용자 이탈률 역시 늘어난다고 함
• 기술 발전에 따라 인터넷 전송 속도는 더욱 빨라졌고, 웹을 이용해 사용자들이 원하는 정보를 더 화려하고 동적으로 표현하는 기술들도 쏟아져 나옴
• 그럼에도 불구하고 사용자가 원하는 평균 웹 로딩 시간은 3초 미만 수준까지 줄어듬
• 따라서 많은 기업들과 엔지니어들이 콘텐츠를 유지하면서 웹 성능을 향상시키는 웹 성능 최적화(Web Performance Optimization, WPO)에 관심을 갖게 됨
• 한국처럼 인터넷 전송 속도가 빠른 나라에선 웹 성능 최적화가 큰 관심을 받지 못했지만, 글로벌 서비스를 지향하며 많은 국가를 대상으로 프로젝트를 진행하는 경우 상대적으로 느린 인터넷 환경에 대비하여 웹 성능 최적화 기술에 주목하고 있음

웹 성능 측정 방법

크롬 브라우저의 개발자 도구

• 전체 HTTP 요청 수와 응답 수
• 전달 받은 콘텐츠 파일들의 크기
• DOMContentLoaded 시간, Load 시간, 로딩 완료 시간(Finish)을 확인 할 수 있음

WebPageTest 서비스

• 세계 여러 위치에서 웹 사이트 로딩 속도를 테스트할 수 있는 무료 서비스
• 일반적인 테스트 에이전트가 아니라 실제 유선망이나 모바일 망의 네트워크, 다양한 기기, 브라우저를 세계 곳곳에 설치하여 실제 사용자 환경에서 테스트 할 수 있도록 꾸며 놓은 서비스

• WebPageTest의 평가 항목은 6개

• First Byte Time: 웹 서버에서 받은 콘텐츠의 바이트가 얼마 만에 도착했는가?

• Keep-Alive Enabled: TCP 연결을 재사용하기 위한 Keep-Alive가 설정되어 있었는가?
• Compress Transfer: 스크립트 파일이 Content-Encoding으로 압축되어 있었는가?
• Compress Image: 이미지를 압축해 최적화했는가?
• Cache Static content: 정적 파일에 브라우저 캐시가 설정되어 있었는가?
• Effective use of CDN: CDN을 효과적으로 적용했는가?

구글 PageSpeed

• 웹 사이트 성능 개선을 돋기 위해 구글에서 개발한 서비스
• 구글이 만든 웹 성능 요소 지표를 바탕으로 PageSpeed가 다양한 웹 성능 영역을 검출함
• FCP(First Contentful Paint)와 DCL(DOM Content Loaded) 두 개 메트릭스를 사용해 특정 웹 페이지 성능을 알려줌
• FCP는 웹 페이지가 사용자에게 시각적 응답을 보인 시간이므로 이 시간이 빠를수록 사용자는 웹 페이지가 빠르게 로딩되었다고 생각함
• DCL은 브라우저가 HTML 문서를 로딩 및 해석하는 시간을 측정한 값으로, 이 시간이 짧아야 사용자가 웹 사이트에 머무르며 콘텐츠를 감상하는 시간이 길어질 수 있음

웹 성능을 만드는 지표

• <<웹 사이트 최적화 기법(High Performance Web Sites)>>(ITC, 2008)에서 14가지 웹 성능 최적화 기법을 정의
• HTTP/2 같은 새로운 프로토콜 기술이 발전하고 웹 개발 트렌드가 변화한 2020년에는 적용할 필요가 없는 부분도 있지만, 대부분 항목이 웹 성능을 최적화하는 데 여전히 중요함

• 이후에 추가된 내용

• AJAX는 캐시가 가능하도록 만든다.

• GET 메소드로 XHR을 사용한다.
• DOM 개체 수를 줄인다.
• 404 NOT FOUND를 없앤다.
• 쿠키 크기를 줄인다.
• 쿠기와 상관없는 정적 콘텐츠를 만든다.
• AlphalmageLoader를 사용하지 않는다.
• HTML에 이미지 크기를 설정하지 않는다.

• 파비콘은 작게 그리고 캐시할 수 있도록 만든다.

• 웹 성능에 영향을 주는 요소는 크게 사용자 환경, 공급자 환경, 전달 환경 세 가지로 나뉨

사용자 환경 - 프런트엔드

• 프런트엔드는 감각적인 디자인으로 더 많은 사용자들이 웹 사이트로 유입될 수 있도록 끌어들이는 역할과 콘텐츠를 보기 편하게 전달하는 역할을 실행
• 빠르고 보기 쉽게 콘텐츠를 전달하는 것이 프런트엔드의 가장 큰 목적

공급자 환경 - 백엔드

• 프런트엔드가 최적화되어 있는데도 웹 성능이 좋지 않다면 백엔드 최적화도 점검해야함
• 백엔드의 성능을 빠르게 알 수 있는 방법은 구글 애널리틱스의 Speed 기능을 이용하면 됨
• 재전송(redirection), 도메인 조회(domain lookup), 서버 연결(sever connection), 서버 응답(sever response) 등이 백엔드 관련 지표임

전달 환경 - 네트워크

• 프런트엔드, 백엔드와 달리 네트워크는 장소와 시간에 따라 속도가 변하기 떄문에 성능 측정이 어려움
• 일반적으로 네트워크 성능을 제약하는 두 가지 요소는 '대역폭(bandwidth)'과 '지연 시간(latency)'임
• 대역폭은 일정 시간에 처리할 수 있는 트래픽 양으로 사용자가 갑작스럽게 증가하면 이에 영향을 받아 웹 콘텐츠의 전달 속도를 느리게 만들 수 있음
• 지연 시간은 기술적 이유로 사용자에게 콘텐츠를 전달하지 못하고 지연되는 시간을 의미하며 인터넷상의 다양한 환경에 영향을 받음
• 인터넷 서비스 사용자(Internet Service Provider, ISP)의 품질에 따라 대역폭과 지연 시간도 달라질 수 있음

웹 성능과 프런트엔드

• 웹에서 사용자에게 제공하는 데이터를 생성, 저장, 전달하는 시스템을 백엔드, 그 데이터를 요청하고 받아서 표현하는 시스템을 프런트엔드라고 분류함
• 프런트엔드는 데이터를 표현하는 역할뿐만 아니라 사용자가 입력한 다양한 형태의 데이터를 백엔드에 전달하는 역할도 함
• 대다수 웹 사이트의 웹 성능을 측정해보면 사이트를 로딩할 때 프런트엔드에서 가장 많은 시간을 소요함
• 프런트엔드가 페이지 로딩 시간 중 대부분을 차지하는 이유는 웹 서버가 아닌 '사용자(브라우저) 관점에서 원하는 콘텐츠를 전달받았는지'가 웹 성능의 기준이기 때문임
• 또한 웹 서버가 콘텐츠를 생산하는 시간보다 사용자가 웹 서비스와 상호 작용하여 원하는 콘텐츠를 가져다 렌더링하는 데 시간이 더 소요되기 때문에 프런트엔드가 웹 성능 지표의 대부분을 차지함

브라우저 렌더링

• 브라우저 렌더링 시 성능 지표를 PageSpeed나 Lighthouse 기능을 이용해 살펴 볼 수 있음
• 이 기능을 이용하여 웹 성능에 가장 큰 영향을 주는 프런트엔드 단계별 소요 시간을 확인하고 최적화를 진행한 후 다시 한번 테스트해 각 단계별 소요 시간이 줄어들었는지 확인할 수 있음

웹 성능 예산

• 웹 성능을 계량할 수 있도록 수치화하여 기업이 목표로 삼을 때 많이 사용하는 방법 중 하나가 웹 성능 예산(web performance budget)임
• 성능 예산이란 웹 성능에 영향을 미치는 다양한 요소를 제어하는 한곗값을 의미함
• 웹 페이지의 팡ㄹ 크기, 페이지를 로딩하는 데 걸리는 시간, 페이지에 포함된 이미지 파일 수 등 다양한 값이 존재함
• 성능 예산은 크게 세 가지 분류로 나눌 수 있음

정량 기반 지표

• 이미지, 스크립트, 폰트 등 웹 페이지 제작에 필요한 요소들에 대한 한곗값
• 대표적인 정량 기반 지표는 다음과 같음
  • 이미지 파일의 최대 크기
  • 최대 웹 폰트 파일 개수
  • 자바스크립트 파일 크기 합
  • 타사 스크립트 개수 합

시간 기반 지표

• milestone timing이라고도 부르며, 정량 기반 지표의 단점을 보완하는 성능 예산
• 브라우저에서 실제로 발생하는 다양한 웹 성능 이벤트 값을 측정하여 사용주가 느끼는 웹 성능에 대한 목표치를 설정하는 방식
• 대표적인 시간 기반 지표는 다음과 같음
  • FCP(First Contentful Paint): 텍스트 또는 이미지와 같이 DOM의 첫 번째 비트를 표시하는 시점
  • TTI(Time to Interactive): 페이지가 사용자 입력에 안정적으로 응답하는 데 걸리는 시간

규칙 기반 지표

• 웹 성능 측정 도구들은 자체적으로 웹 성능 지표를 측정하여 각 사이트의 성능 점수를 매기는 알고리즘을 갖고 있음
• 또한 성능 측정 도구들은 측정 결과를 통해 어떻게 최적화를 진행해야 하는지 기술적 첨언도 해줌
• 대표적인 규칙 기반 지표는 다음과 같음
  • WebPageTest의 성능 점수
  • 구글 Lighthouse의 성능 점수
• PageSpeed, WebPageTest, Lighthouse 등이 제공하는 웹 성능 점수는 공신력있는 표준 점수이기 때문에 규칙 기반 지표에서 자주 사용됨
• 혹은 사내에 자체적인 웹 성능 지표에 대한 테스트 케이스를 만들고 자동화 테스트 시스템을 통해 웹 사이트의 성능을 지표화하는 방식을 이용하기도 함
• 정량 기반 지표와 시간 기반 지표를 개선할수록 규칙 기반 지표 점수는 높아짐

💭 Insights

서브 도메인

• 서브 도메인은 다중의 사이트를 만들고 연결을 하고자 할 때 독립적으로 접속할 수 있도록 도와준다.
• 예를 들어 네이버 웹 서비스의 도메인은 https://www.naver.com인데 모바일 서비스 도메인은 https://m.naver.com
• 네이버 메일의 도메인은 https://mail.naver.com, 카페의 도메인은 https://section.cafe.naver.com, 블로그는 https://section.blog.naver.com이다.
• 웹 사이트를 개발할 때 서브 도메인을 이용할지 하위 디렉토리 이용할지 결정할 수 있다.
• 하위 디렉토리를 사용하게 된다면 네이버 메일은 https://www.naver.com/mail 이 될 것이다.

• 하위 디렉토리를 사용하면 네이버 메일이 네이버 웹 사이트의 일부가 된다.
• 서브 도메인을 사용하면 네이버 메일은 네이버 웹 사이트와 별개의 사이트가 된다. 서버를 따로 둘 수 있다.
• 웹 사이트의 SEO에서 검색 엔진은 하위 디렉토리를 기본 도메인의 일부로 보기 떄문에 도메인이 가지고 있는 신뢰도와 SEO 점수를 이어 받을 수 있기 때문에 더 유리하다고 한다.

• 그럼 서브 도메인의 장점은 무엇이 있을까
• 먼저, 네이버 메일과 네이버 카페 처럼 서로 다른 주제나 목적을 가진 사이트를 운영할 때 유용하다.
• 검색 엔진이 이를 독립된 사이트로 인식하기 때문에, 각 사이트에 적합한 키워드를 타겟팅할 수 있다.
• 그리고 글로벌 사이트의 경우 각 국가나 언어별로 서브 도메인을 설정하는 것이 유리하다.
• 이런 상황에서는 지역별, 언어별 검색 결과에 노출되기 쉽고, 각 도메인별 맞춤형 SEO 전략을 구사할 수 있다.
• 또한 서브 도메인은 각기 다른 서버나 IP로 운영이 가능해, 트래픽이 많은 경우 서버 자원을 분리해 효율적으로 관리할 수 있다.

• 그러면 블로그 tistory와 velog를 비교했을 때, velog 블로그가 SEO에서 더 유리할 것 같다.
• tistory는 {사용자}.tistory.com 이렇게 도메인이 만들어지기 때문이다.

www (World Wide Web)

• 서브 도메인에 대해 간단히 찾아보았는데, 그럼 대부분의 웹 사이트가 서브 도메인으로 두는 www는 뭘까 궁금해서 찾아보았다.
• www는 World Wide Web의 약자로 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공유 시스템이다.
• 간단히 웹이라고 많이 하는데, 따라서 책에서 말하는 웹을 의미한다.

• www를 대부분의 웹 사이트에서 서브도메인으로 두는 이유는, 옛날부터 웹 서비스 앞에 www를 서브 도메인으로 두는걸 관습적으로 사용해 왔기 때문이라고 한다.
• 반드시 www를 서브 도메인으로 둬야하는 것은 아니고, www.{도메인} 주소에 서버를 따로 지정을 하지 않는다면 www.{도메인}은 존재하지 않는다.
• 대부분의 서비스는 www를 붙이고 있고, www를 붙이지 않더라도 www.를 붙여도 기본 도메인으로 리다이렉트 시켜준다.
• 네이버의 경우 https://www.naver.com을 검색하거나, https://naver.com을 검색하거나 모두 https://www.naver.com로 검색된다.
• 유튜브나 애플 사이트 등도 마찬가지다.
• 반대로 GitHub는 https://www.github.com을 검색하거나, https://github.com을 검색하거나 모두 https://github.com로 검색된다.
• 대부분의 유명한 사이트가 두 가지 모두 허용하지만, 모든 사이트가 두개를 허용하는 것은 아니다.
• 허용 안하는 유명한 사이트가 뭐가 있을지 찾아보았는데, 벨로그가 www를 붙이면 페이지를 찾을 수 없다고 나온다.

AJAX (Asynchronous JavaScript And XML)

• AJAX는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
  • 표현 정보를 위한 HTML과 CSS
  • 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
  • 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest(XHR)
• 서버에 페이지의 새로고침 없이 비동기 통신을 통해 데이터를 요청하는 것이다.
• XML 뿐만아니라 일반 텍스트나 JSON 데이터도 가능하다.
• AJAX가 나오기 전에는 브라우저에서 폼을 채우고 이를 웹 서버로 submit을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응답으로 되돌려주는 방식이였다.
• AJAX를 위해서는 XMLHttpRequest가 반드시 필요하다.
• AJAX 호출을 위해서 브라우저에 내장된 window.fetch()나 Axios, JQueryAJAX 등을 사용할 수 있다.

• AJAX는 그냥 일반적으로 자바스크립트를 이용해 서버와 비동기 통신을 하며 웹 개발하는 것을 의미한다는 것을 알게 되었다.
• 그렇다면 AJAX 캐싱은 그냥 일반적으로 데이터를 페칭할 때 데이터를 캐싱하는 것을 의미하는 것 같다.

• 1장에서 많은 웹 성능 최적화 기법이 언급된다.
• CDN, ETag, XHR, AlphaImageLoader 등이 궁금해서 찾아보고 싶은 것들이 많았고,
• 스타일 시트는 상단에 넣고 스크립트를 하단에 넣는 이유나, 404 Not Found를 없애는 이유 등 궁금한 것들이 많았다.
• 하지만 이 내용들은 뒤에서 다룬다고 나와있기 때문에 지금 단계에서 다 찾아보고 공부해 보지는 않을 것이고,
• 가장 궁금했었던 AJAX에 대해서만 알아봤다.